<template>
  <card title="收支账号">
    <div class="bank-account">
      <page-form layout="vertical" ref="formRef" :model="formV">
        <div class="contact-item" v-for="(item, index) in formV.backInfoList" :key="index">
          <page-form-row>
            <page-form-item :field="`backInfoList.${index}.inExpWay`" :rules="{ required: true, message: '请选择' }" label="收支方式">
              <a-select v-model="item.inExpWay" placeholder="请选择" :options="staffDict.inExpWayList" />
            </page-form-item>
            <page-form-item
              v-if="item.inExpWay"
              :field="`backInfoList.${index}.bankCardNumber`"
              :rules="{ required: true, message: '请输入' }"
              label="账号"
            >
              <i-input :max-length="50" v-model="item.bankCardNumber" placeholder="请输入" />
            </page-form-item>
            <page-form-item
              v-if="item.inExpWay && item.inExpWay == '1'"
              :field="`backInfoList.${index}.bank`"
              :rules="{ required: true, message: '请输入' }"
              label="开户行"
            >
              <i-input :max-length="50" v-model="item.bank" placeholder="请输入" />
            </page-form-item>
          </page-form-row>
          <div class="flex operate-list">
            <a-button type="text" class="operate-btn del" @click="deleteItem(index)">
              <a-space size="mini"><icon-minus-circle />删除</a-space>
            </a-button>
            <a-button v-if="index == listLength - 1 && listLength < MAX_COUNT" type="text" class="operate-btn new" @click="addItem">
              <a-space size="mini"><icon-plus-circle />新增</a-space>
            </a-button>
          </div>
        </div>

        <div style="padding-bottom: 20px; text-align: center" v-if="listLength == 0">
          <a-empty description="暂无收支账号">
            <template #image>
              <icon-empty size="36" />
            </template>
          </a-empty>
          <a-button type="primary" @click="addItem">
            <template #icon>
              <icon-plus />
            </template>
            新增收支账号
          </a-button>
        </div>
      </page-form>
    </div>
  </card>
</template>

<script setup lang="ts">
  import { computed, ref, watch } from 'vue'
  import { usePageDict } from '@/hooks/useDict'

  const staffDict = usePageDict('staffDict')

  const props = defineProps({
    form: {
      type: Object,
    },
  })

  const MAX_COUNT = 10
  const formRef = ref()

  const listLength = computed(() => {
    return formV.value.backInfoList.length
  })

  // 选择省市区回调
  // const changeCityFn = (item, option) => {
  //   item.provinceCode = option.provinceCode
  //   item.provinceName = option.provinceName
  //   item.cityCode = option.cityCode
  //   item.cityName = option.cityName
  // }

  // 删除
  const deleteItem = (index) => {
    formV.value.backInfoList.splice(index, 1)
    formRef.value.clearValidate(`backInfoList.${index}.bankCardNumber`)
  }

  // 增加
  const addItem = () => {
    formV.value.backInfoList.push({})
  }

  const setFeildWarn = (index) => {
    formRef.value.setFields({
      [`backInfoList.${index}.bankCardNumber`]: {
        status: 'error',
        message: '同类收支方式下的账号不能重复',
      },
    })
  }

  // 判断同类型收支账号的账号是否重复
  const checkBankCardNumber = () => {
    return new Promise((resolve) => {
      formV.value.backInfoList.forEach((item, index) => {
        if (item.inExpWay) {
          const samePayment = formV.value.backInfoList.filter((i) => i.inExpWay === item.inExpWay)
          if (samePayment.length > 1) {
            const sameBankCardNumber = samePayment.filter((i) => i.bankCardNumber === item.bankCardNumber)
            if (sameBankCardNumber.length > 1) {
              setFeildWarn(index)
              resolve(true)
            } else {
              resolve(false)
            }
          } else {
            resolve(false)
          }
        }
      })
    })
  }

  const validate = () => {
    return new Promise((resolve) => {
      formRef.value.validate((err) => {
        if (err) {
          resolve(!err)
        } else {
          if (formV.value.backInfoList.length == 0) {
            resolve(true)
          } else {
            checkBankCardNumber().then((res) => {
              resolve(!res)
            })
          }
        }
      })
    })
  }

  // 初始化数据
  const formV = ref(props.form)
  const dropWatch = watch(
    () => props.form,
    (val) => {
      formV.value = val
      const backInfoList = formV.value.backInfoList
      if (!backInfoList || backInfoList.length == 0) {
        formV.value.backInfoList = []
      }
      dropWatch()
    }
  )

  defineExpose({
    validate,
  })
</script>

<style lang="less" scoped>
  .bank-account {
    background: rgba(247, 248, 250, 0.5);
    padding: 20px 172px 0 20px;
    margin-bottom: 20px;

    .contact-item {
      position: relative;
      .operate-list {
        position: absolute;
        left: 100%;
        bottom: 20px;
        width: 154px;
        padding-left: 16px;
        .operate-btn {
          font-size: 14px;
          height: 32px;
          line-height: 32px;
          white-space: nowrap;
          outline: none;
          cursor: pointer;
          user-select: none;
          padding: 0 12px;
          icon {
            margin-right: 8px;
          }
          &.del {
            color: #ea0000;
          }
          &.new {
            color: #165dff;
          }
        }
      }
    }
  }
</style>
